<template>
  <div :id="chartId" style="width: 100%;height:2.5rem;"></div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: {
    chartId: String,
    chartData: Object
  },
  mounted () {
    console.log(this.chartId)
    console.log(this.chartData)
    this.$nextTick(() => {
      this.drawLine()
    })
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.chartId))
      // 绘制图表
      let option = {
        title: {
          text: '',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.chartData.legendData,
          textStyle: {
            color: '#ffffff'
          },
          right: '10px',
          top: '10px'
        },
        grid: {
          left: '40px',
          top: '20px',
          bottom: '20px'
        },
        color: ['#20ACE7'],
        xAxis: [
          {
            type: 'category',
            data: this.chartData.data.names,
            axisLine: {
              lineStyle: {
                color: '#7389B9'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: function (val) {
                return (val) + '%'
              }
            },
            type: 'value',
            max: this.chartData.max,
            axisLine: {
              lineStyle: {
                color: '#7389B9'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        color: ['#23D2FC', '#008BE4', '#24C768', '#CF20FF'],
        series: [
          {
            name: this.chartData.legendData[0],
            type: 'line',
            data: this.chartData.data.series1,
            symbol: 'none'
          },
          {
            name: this.chartData.legendData[1],
            type: 'line',
            data: this.chartData.data.series2,
            symbol: 'none'
          },
          {
            name: this.chartData.legendData[2],
            type: 'line',
            data: this.chartData.data.series3,
            symbol: 'none'
          },
          {
            name: this.chartData.legendData[3],
            type: 'line',
            data: this.chartData.data.series4,
            symbol: 'none',
            markLine: {
              lineStyle: {
                color: '#FFB500'
              },
              data: [
                {type: 'average', name: '98%计划线'}
              ]
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
